<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>





<c:if test="${notificationCommand!=null}">
	<form:form class="form-stacked" 
				commandName="notificationCommand"
				action="${pageContext.request.contextPath}/admin/notification/notification"
				method="post"
				onsubmit="return checkDates();">
		<div class="clearfix">
			<label>Message:</label>
			<form:input style="width: 99%;" path="message" maxlength="255" />
			<form:errors path="message" />
		</div>
		<hr />
		<div class="clearfix">
			<form:input path="beginTime"/>
			<label>Begin:</label>
			<input type="text" id="beginDate" maxlength="255" readonly="readonly" style="width:80px"/>
			<form:errors path="beginTime" />
			<input type="text" id="spinnerBeginHour" value="0" maxlength="2" style="width:35px"/> :
			<input type="text" id="spinnerBeginMin" value="0" maxlength="2" style="width:35px"/>
		</div>
		<div class="clearfix">
			<form:input path="endTime"/>
			<label>End:</label>
			<input type="text" id="endDate" maxlength="255" readonly="readonly" style="width:80px"/>
			<form:errors path="endTime" />
			<input type="text" id="spinnerEndHour" value="0" maxlength="2" style="width:35px"/> :
			<input type="text" id="spinnerEndMin" value="0" maxlength="2" style="width:35px"/>
		</div>
		<div class="clearfix">
			<form:checkbox path="maintenanceRelated"/> Start maintenance mode on completion<br/>
			<form:errors path="maintenanceRelated" />
		</div><br/>
		<div class="clearfix">
			<input class="btn btn-primary" type="submit" value="Register"/>
		</div>
	</form:form>
	<script type="text/javascript">
	
		$(function(){
			$('#beginTime').css("display","none");
			$('#endTime').css("display","none");
			$('#endDate').val($('#endTime').val().match(/(.{10}),/)[1] );
			$('#beginDate').val($('#beginTime').val().match(/(.{10}),/)[1]);
			
			$('#spinnerBeginHour').val($('#beginTime').val().match(/,(.{1,2});/)[1] );
			$('#spinnerBeginMin').val($('#beginTime').val().match(/;(.{1,2})/)[1] );
			
			$('#spinnerEndHour').val($('#endTime').val().match(/,(.{1,2});/)[1] );
			$('#spinnerEndMin').val($('#endTime').val().match(/;(.{1,2})/)[1] );
			
		});
		
		var title = new LiveValidation(document.getElementById('message'));
		
		title.onValid = function() {
			this.insertMessage(document.createElement("span"));
			this.addFieldClass();
		};
		title.add(Validate.Presence, {
			failureMessage : "Message can not be empty!"
		});
		
		$('#endDate').datepicker().change(
				function(){$('#endTime').val($('#endTime').val().replace(/.{10},/,$(this).val()+','));});
		
		$('#spinnerEndHour').spinner({ min: 0, max: 23 }).change(
				function(){$('#endTime').val($('#endTime').val().replace(/,[0-9]{1,2};/,','+$(this).spinner('value')+';'));});
		
		$('#spinnerEndMin').spinner({ min: 0, max: 59 }).change(
				function(){$('#endTime').val($('#endTime').val().replace(/;[0-9]{1,2}/,';'+$(this).spinner('value')));});
		
		$('#beginDate').datepicker().change(
				function(){$('#beginTime').val($('#beginTime').val().replace(/.{10},/,$(this).val()+','));});
		
		$('#spinnerBeginHour').spinner({ min: 0, max: 23 }).change(
				function(){$('#beginTime').val($('#beginTime').val().replace(/,[0-9]{1,2};/,','+$(this).spinner('value')+';'));});
		
		$('#spinnerBeginMin').spinner({ min: 0, max: 59 }).change(
				function(){$('#beginTime').val($('#beginTime').val().replace(/;[0-9]{1,2}/,';'+$(this).spinner('value')));});
		
		function checkDates(){
			var bdate = new Date($('#beginDate').val());
			bdate.setHours($('#spinnerBeginHour').val());
			bdate.setMinutes($('#spinnerBeginMin').val());
			var edate = new Date($('#endDate').val());
			edate.setHours($('#spinnerEndHour').val());
			edate.setMinutes($('#spinnerEndMin').val());
			
			var now = new Date();
			now.setMinutes(now.getMinutes()-1);
			
			if(now>bdate) {
				alert("Begin date must not be earlier than now!");
				return false;
			}
			
			if( bdate > edate ) {
				alert("Begin date must be earlier than end date!");
				return false;
			}
			return true;
		}
		
	</script>
</c:if>

<c:if test="${not empty notificationList}">
	
		<table class="table table-striped table-condensed black">
			<thead>
				<tr>
					<th width="300px">Description</th>
					<th>Start</th>
					<th>End</th>
					<th>Time Left</th>
					<th>Author</th>
					<th colspan="1"></th>
				</tr>
			</thead>
			<c:forEach var="notification" items="${notificationList}"
				varStatus="iterator">
				<tr>
					<td>${notification.message }</td>
					<td><fmt:formatDate value="${notification.beginTime}" pattern="dd-MM-yyyy HH:mm" type="date"/></td>
					<td><fmt:formatDate value="${notification.endTime}" pattern="dd-MM-yyyy HH:mm" type="date"/></td>
					<td><c:choose>
							<c:when test="${notification.timeLeft>0}">
								 ${fn:substringBefore(notification.timeLeft div
									60,'.') }:<c:if test="${(notification.timeLeft mod 60)<10}">0</c:if>${notification.timeLeft mod 60}
							</c:when>
							<c:otherwise>no timer</c:otherwise>
						</c:choose></td>
					<td><a href=<c:url value='/profile/${notification.author.id}'/>>${notification.author.name}</a></td>
					<td>
						<span class="badge badge-info pointerCursor"
							onclick="showMessage(${iterator.index}, 'deleteNotif');"
							title="Delete notification">
							<i class="icon-remove icon-white"></i>
						</span>
					</td>
				</tr>
			</c:forEach>
		</table>
	
</c:if>

<div id="myModal" class="modal fade in" style="display: none;">
		<div class="modal-header" style="border-bottom: 0px;">
			<a href="#" class="close" data-dismiss="modal">&times;</a>
			<h3>Confirm</h3>
		</div>
		<div class="modal-body">
			<div>
				<p>
					<strong id="message"></strong>
				</p>
			</div>
		</div>
		<div class="modal-footer">
			<div class="alert-actions">
				<a id="btnNo" class="btn" href="#" data-dismiss="modal">No</a> 
				<a id="btnYes" class="btn btn-primary" href="#">Yes</a>
			</div>
		</div>
	</div>

<script type="text/javascript">
		
	
	function showMessage(id, cmnd) {
		if (cmnd == "deleteNotif") {
			document.getElementById('message').innerHTML = "Do you want to delete this notification?";
			document.getElementById('btnYes').setAttribute('href', '<c:url value="/admin/notification/remove/' + id +'"/>');
		} 

		$('#myModal').modal({
			backdrop: true,	
			keyboard: true,
			show: true
		});
	};
	$('#menuNotification').addClass('active');
	setActiveMainMenuElem('administration');
</script>